import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Upload, Icon, message, Button} from 'antd';
import {FILES_API} from '../constants';
import styles from './style.css';
const basePath = fetch.basePath || '';

class FileUpload extends PureComponent {
    static getDerivedStateFromProps(props, state) {
        if(state.default && props.fileList.length)
            return {
                fileList: props.fileList.map(item => ({
                    url: item.url ? item.url : `${FILES_API.files}/${item.fileId}`,
                    uid: item.fileId,
                    id: item.fileId,
                    name: item.fileName,
                    status: 'done',
                })),
                default: false
            };
        return null;
    }
    state = {
        loading: false,
        fileList: [],
        default: true,

    }
    handleBeforeUpload = file => {
        const isLt20M = file.size / 1024 / 1024 < 20;
        if(!isLt20M)
            message.error(this.props.intl.formatMessage({
                id: 'fileUpload.message.fileSize',
                defaultMessage: '文件大小不能大于20MB'
            }));
        return isLt20M;
    }


    handleChange = ({file, fileList}) => {
        if(file.status === 'uploading')
            this.setState({loading: true});

        if(file.status === 'done') {
            const fileInfo = file.response.payload[0];
            this.setState({
                loading: false
            });
            this.props.onChange(fileInfo);
            message.success(this.props.intl.formatMessage({
                id: 'fileUpload.message.success',
                defaultMessage: '上传成功'
            }));
            const fileIndex = fileList.findIndex(f => f.uid === file.uid);
            fileList[fileIndex].id = file.response.payload[0].id;
        }
        if(file.status === 'error') {
            this.setState({
                loading: false
            });
            message.error(this.props.intl.formatMessage({
                id: 'fileUpload.message.fail',
                defaultMessage: '上传失败'
            }));
        }
        this.setState({fileList: file.status ? [...fileList] : this.state.fileList});
    }

    render() {
        const fileList = this.state.fileList.map(f => {
            if(f.id)
                return Object.assign({}, f, {
                    url: `${FILES_API.files}/${f.id}`
                });
            return f;
        });
        return (
            <Upload
                name="file"
                multiple={true}
                fileList={fileList}
                className={styles.uploader}
                onRemove={this.props.onRemove}
                beforeUpload={this.handleBeforeUpload}
                action={`${basePath}${FILES_API.files}`}
                onChange={this.handleChange}>
                <Button className="ant-upload-text"><Icon type={this.state.loading ? 'loading' : 'plus'} />{this.props.intl.formatMessage({
                    id: 'fileUpload.btn.upload',
                    defaultMessage: '上传附件'
                })}</Button>
            </Upload>
        );
    }
}

FileUpload.propTypes = {
    fileList: PropTypes.array,
    intl: PropTypes.object,
    onChange: PropTypes.func,
    onRemove: PropTypes.func
};

export default injectIntl(FileUpload);
